<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="300px">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item label="指定用户" prop="user_id">
						<el-select
							v-model="form.user_id"
							clearable
							placeholder="请输入选择用户"
							filterable
							remote
							:remote-method="userIdRemoteMethod"
							:loading="userIdSelect.loading"
							@focus="onUserIdFocus"
							class="w100"
						>
							<el-option v-for="item in userIdSelect.options" :key="item.id" :label="item.nickname" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col>
					<el-form-item label="发放数量" prop="grant_num">
						<el-input v-model="form.grant_num" placeholder="请输入发放数量" @input="verifiyNumberIntegerGrantNum" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col>
					<el-form-item label="操作密码" prop="password">
						<el-input v-model="form.password" :type="isShowPassword ? 'text' : 'password'" placeholder="请输入操作密码">
							<template #suffix>
								<i
									class="iconfont el-input__icon login-content-password"
									:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
									@click="isShowPassword = !isShowPassword"
								>
								</i>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
				<el-button @click="onCancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { couponApi, userList } from '/@/api/admin';
import { ElMessage } from 'element-plus';
import { verifiyNumberInteger } from '/@/utils/toolsValidate';

const CouponApi = couponApi();

export default {
	setup() {
		const state = reactive({
			title: '发放优惠券',
			open: false,
			form: {} as any,
			rules: {
				user_id: [{ required: true, message: '指定用户不能为空', trigger: ['blur', 'change'] }],
				grant_num: [{ required: true, message: '发放数量不能为空', trigger: ['blur'] }],
			}, // 表单校验
			submitLoading: false,
			userIdSelect: {
				options: [] as any,
				loading: false,
			},
			isShowPassword: false,
		});

		const formRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		// 指定用户获取焦点
		const onUserIdFocus = () => {
			if (!state.form.user_id) {
				state.userIdSelect.loading = true;
				_userList({ pageNum: 1, pageSize: 10 });
			}
		};
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					_couponGrant(state.form);
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			reset();
			callback = fn;
			state.open = true;
			state.form.coupon_id = config.row.id;
		};
		// 表单重置
		const reset = () => {
			state.form = {
				coupon_id: '',
				user_id: '',
				grant_num: '',
				password: '',
			};
			(formRef.value as any)?.resetFields();
		};
		// 选择用户查询
		const userIdRemoteMethod = (query: any) => {
			if (query) {
				state.userIdSelect.loading = true;
				_userList({ pageNum: 1, pageSize: 10, nickname: query });
			}
		};
		// 库存数量
		const verifiyNumberIntegerGrantNum = (val: string) => {
			state.form.grant_num = verifiyNumberInteger(val);
		};

		/********** 网络事件 **********/
		//普通用户列表
		const _userList = (_data: object) => {
			userList(_data)
				.then((res: any) => {
					state.userIdSelect.options = res.data.list;
					state.userIdSelect.loading = false;
				})
				.catch(() => (state.userIdSelect.loading = false));
		};
		// 手动发放优惠券
		const _couponGrant = (_data: object) => {
			CouponApi.couponGrant(_data)
				.then(() => {
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => (state.submitLoading = false));
		};

		return {
			formRef,
			onUserIdFocus,
			onSubmitForm,
			openDialog,
			onCancel,
			userIdRemoteMethod,
			verifiyNumberIntegerGrantNum,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
